<template>
  <div id="waterfall" >
    <Waterfall :list="list" :breakpoints="breakpoints" backgroundColor='#f5f5f5'>
      <template #item="{ item }" >
        <div style="background-color: #fff;" class="item">
          <div class="btn" v-if="item.is_top">置顶</div>
          <img :src="item.thumb" alt="" width="100%">
          <div class="p-10">
            <div class="f-14 t-l line-clamp-2">{{item.title}}</div>
            <div class="flex-j-sb flex-a-c" style="padding-top: 4px;">
              <div class="f-12" style="color: #6E6E79;">{{item.created_time}}</div>
              <van-button type="danger" plain round size="mini" style="padding: 0 8px;"
                @click.stop="toUrl('articleContent',{'id': item.id,'isgood': 0, 'store_id': store_id })">
                查看详情
              </van-button>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
</template>
<script>
import { Waterfall } from "vue-waterfall-plugin";
import "vue-waterfall-plugin/dist/style.css";
export default {
  props: ["list",'store_id'],
  data() {
    return {
      breakpoints: {
        1200: {
          //当屏幕宽度小于等于1200
          rowPerView: 4
        },
        800: {
          //当屏幕宽度小于等于800
          rowPerView: 3
        },
        500: {
          //当屏幕宽度小于等于500
          rowPerView: 2
        }
      }
    };
  },
  methods: {
    toUrl(name, params = {}, query = {}) {
      this.$router.push(this.fun.getUrl(name, params, query));
    }
  },
  components: { Waterfall }
};
</script>
<style lang="scss" scoped>
#waterfall {
  .item {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    img {
      display: block;
    }
  }
  .p-10 {
    padding: 0.625rem;
  }
  .btn {
    background: rgba(0,0,0,0.6);
    border-radius: 1rem;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    line-height: 24px;
    padding: 0 8px;
  }
}
</style>
